<template>


  <van-list class="list" v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <ul>
      <li class="classic-movie-item" v-for="movie in classicMovies" :key="movie.movieId"
        @click="gotoMovieDetail(movie.movieId)">
        <img :src="movie.poster" :alt="movie.movieInfo.title">
        <div class="movie-info">
          <div class="title line-ellipsis">{{ movie.movieInfo.title }}</div>
          <div class="english-title line-ellipsis" v-if="movie.movieInfo.englishTitle">{{ movie.movieInfo.englishTitle
            }}</div>
          <div class="type line-ellipsis">{{ movie.movieInfo.actors }}</div>
          <div class="show-info line-ellipsis">{{ movie.movieInfo.showInfo }}</div>
        </div>

        <div class="rank">
          <template v-if="movie.score"> {{ movie.score }}<span>分</span> </template>
          <template v-else><span>暂无评分</span></template>
        </div>
      </li>
    </ul>

  </van-list>

</template>


<script setup>
import { fetchClassicMovies } from "@/api/index.js"
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const loading = ref(false);
const finished = ref(false);

const sortId = ref(1);
const showType = ref(3);

const limit = ref(10);
const pageNum = ref(1);
const offset = computed(() => {
  return (pageNum.value - 1) * limit.value
})

const classicMovies = ref([]);

const gotoMovieDetail = (movieId) => {

  router.push({ path: `/movie/${movieId}` })
}




onMounted(async () => {
  loading.value = true;
  const response = await fetchClassicMovies(sortId.value, showType.value, limit.value, offset.value);
  classicMovies.value = response;
  // console.log("classicMovies:", response);
  loading.value = false;

})

const onLoad = async () => {
  loading.value = true;
  const response = await fetchClassicMovies(sortId.value, showType.value, limit.value, offset.value);
  if (response.length === 0) {
    loading.value = false;
    finished.value = true;
    return;
  }
  classicMovies.value.push(...response)
  loading.value = false;
};

</script>


<style scoped>
.line-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}



.list {
  margin-top: 44px;
  padding: 10px;
  background-color: #fff;
}




.classic-movie-item {
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.classic-movie-item:last-child {
  border-bottom: none;
}



.classic-movie-item img {
  width: 64px;
  height: 90px;
  display: block;
}


.classic-movie-item .movie-info {
  width: calc(100% - 124px);
  margin-left: 10px;
}



.classic-movie-item .movie-info .title {
  font-size: 17px;
  color: #333;
  font-weight: 700;
  margin-bottom: 4px;
}

.classic-movie-item .movie-info .english-title,
.classic-movie-item .movie-info .type,
.classic-movie-item .movie-info .show-info {
  font-size: 13px;
  font-weight: 400;
  color: #666;
  margin-bottom: 4px;
}

.classic-movie-item .rank {
  width: 60px;
  text-align: center;
  font-size: 15px;
  color: #faaf00;
  /* margin-left: 10px; */
}


.classic-movie-item .rank span {
  color: #999;
  font-size: 12px;
}
</style>
